<template>
  <div class="boxs">
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div>
      <div style="margin-bottom:16px">乘客信息</div>
      <el-table
        border
        :data="tableData"
        ref="multipleTable"
        style="width: 100%"
        @select="handleSelectionChange"
        :header-cell-class-name="cellClass"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="passengerName" label="乘客姓名" width="180">
        </el-table-column>
        <el-table-column label="票号" width="180">
          <template slot-scope="scope">
            {{scope.row.changeList.ticketNo || scope.row.ticketNo || ""}}
          </template>
        </el-table-column>
        <el-table-column label="乘客类型" width="180">
          <template slot-scope="scope">
            {{ scope.row.passengerType === "adult"?"成人": scope.row.passengerType === "children"?"儿童":"婴儿"}}
          </template>
        </el-table-column>
        <el-table-column prop="idNumber" label="证件号"> </el-table-column>
      </el-table>
    </div>
    <!-- 航班信息 -->
    <div class="green" style="margin-top:24px" v-if="changeTableData.length">
      <div style="margin-bottom:16px">航班信息-改签</div>
      <el-table border :data="changeTableData" style="width: 100%">
        
        <el-table-column prop="passengerName" label="乘客姓名" width="80">
        </el-table-column>
        <el-table-column prop="ticketNo" label="票号" width="180">
        </el-table-column>
        <el-table-column prop="ticketAmount" label="票面价" width="80">
        </el-table-column>
        <el-table-column prop="airportAmount" label="机建费" width="80">
        </el-table-column>
        <el-table-column prop="fuelAmount" label="燃油费" width="80">
        </el-table-column>
        <el-table-column prop="departureCity" label="起飞" width="120">
          <template slot-scope="scope">
            {{ (scope.row.departureCity? scope.row.departureCity:'') + scope.row.departureAirportName}}
          </template>
        </el-table-column>
        <el-table-column prop="arriveCity" label="到达" width="120">
          <template slot-scope="scope">
            {{ (scope.row.arriveCity? scope.row.arriveCity:'') + scope.row.arriveAirportName}}
          </template>
        </el-table-column>
        <el-table-column prop="cabin" label="舱位" width="50">
        </el-table-column>
        <el-table-column prop="flightNo" label="航班" width="80">
        </el-table-column>
        <el-table-column prop="departureTime" label="乘机时间">
        </el-table-column>
        <el-table-column prop="arriveTime" label="到达时间">
        </el-table-column>
        <el-table-column prop="airlinerName" label="航空公司">
        </el-table-column>
      </el-table>
    </div>
    <div class="green" style="margin-top:24px" v-if="type == 'normal'">
      <div style="margin-bottom:16px">航班信息-去程</div>
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="passengerName" label="乘客姓名" width="80">
        </el-table-column>
        <el-table-column prop="ticketNo" label="票号" width="180">
        </el-table-column>
        <el-table-column prop="ticketAmount" label="票面价" width="80">
        </el-table-column>
        <el-table-column prop="airportAmount" label="机建费" width="80">
        </el-table-column>
        <el-table-column prop="fuelAmount" label="燃油费" width="80">
        </el-table-column>
        <el-table-column prop="departureCity" label="起飞" width="120">
          <template slot-scope="scope">
            {{ (scope.row.departureCity? scope.row.departureCity:'') + scope.row.departureAirportName}}
          </template>
        </el-table-column>
        <el-table-column prop="arriveCity" label="到达" width="120">
          <template slot-scope="scope">
            {{ (scope.row.arriveCity? scope.row.arriveCity:'') + scope.row.arriveAirportName}}
          </template>
        </el-table-column>
        <el-table-column prop="cabin" label="舱位" width="50">
        </el-table-column>
        <el-table-column prop="flightNo" label="航班" width="80">
        </el-table-column>
        <el-table-column prop="departureTime" label="乘机时间">
        </el-table-column>
        <el-table-column prop="arriveTime" label="到达时间">
        </el-table-column>
        <el-table-column prop="airlinerName" label="航空公司">
        </el-table-column>
      </el-table>
    </div>
    <!-- 返程 -->
    <div class="green" style="margin-top:24px" v-if="rnTableData.length">
      <div style="margin-bottom:16px">航班信息-返程(二程)</div>
      <el-table border :data="rnTableData" style="width: 100%">
        <el-table-column prop="passengerName" label="乘客姓名" width="80">
        </el-table-column>
        <el-table-column prop="ticketAmount" label="票面价" width="80">
        </el-table-column>
        <el-table-column prop="ticketNo" label="票号" width="180">
        </el-table-column>
        <el-table-column prop="airportAmount" label="机建费" width="80">
        </el-table-column>
        <el-table-column prop="fuelAmount" label="燃油费" width="80">
        </el-table-column>
        <el-table-column prop="departureCity" label="起飞" width="120">
          <template slot-scope="scope">
            {{ (scope.row.departureCity? scope.row.departureCity:'') + scope.row.departureAirportName}}
          </template>
        </el-table-column>
        <el-table-column prop="arriveCity" label="到达" width="120">
          <template slot-scope="scope">
            {{ (scope.row.arriveCity? scope.row.arriveCity:'') + scope.row.arriveAirportName}}
          </template>
        </el-table-column>
        <el-table-column prop="cabin" label="舱位" width="50">
        </el-table-column>
        <el-table-column prop="flightNo" label="航班" width="80">
        </el-table-column>
        <el-table-column prop="departureTime" label="乘机时间">
        </el-table-column>
        <el-table-column prop="arriveTime" label="到达时间">
        </el-table-column>
        <el-table-column prop="airlinerName" label="航空公司">
        </el-table-column>
      </el-table>
    </div>
    <!-- 辅营产品 -->
    <div class="green" style="margin-top:24px" v-if="flightOrderAssist.length">
      <div style="margin-bottom:16px">辅营产品</div>
      <el-table
        border
        :data="flightOrderAssist"
        size="mini"
        :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }"
        style="width: 100%"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column label="保险名" prop="productName"></el-table-column>
        <el-table-column
          label="保险售价"
          prop="salesMoney"
        ></el-table-column>
        <el-table-column label="被保人" prop="insuredName"></el-table-column>
        <el-table-column label="被保人手机号" prop="insuredPhone"></el-table-column>
        <el-table-column label="是否开报" >
          <template slot-scope="scope">
            {{ scope.row.insuranceStatus | insuranceStatus}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 信息 -->
    <!-- <div class="green">
      <div>
        取票信息
      </div>
      <el-form :inline="true" :model="informationVoList" class="" size="mini">
        <el-form-item label="出票地点" class="passenger">
          <el-input style="width:100px;" v-model="informationVoList.ticketingPoint"></el-input>
        </el-form-item>
        <el-form-item label="出票时间" class="passenger2">
          <el-input style="width:100px;" v-model="informationVoList.deliveryMethod"></el-input>
        </el-form-item>
        <el-form-item label="联系人 " class="passenger">
          <el-input style="width:100px;" v-model="informationVoList.contact"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" class="passenger2">
          <el-input style="width:150px;" v-model="informationVoList.contactInformation"></el-input>
        </el-form-item>
        <el-form-item label="配单时间" class="passenger">
          <el-input style="width:100px;" v-model="informationVoList.assignDate"></el-input>
        </el-form-item>
        <el-form-item label="送票费用" class="passenger2">
          <el-input style="width:100px;" v-model="informationVoList.deliverFee"></el-input>
        </el-form-item>
      </el-form>
    </div> -->
    <!-- 价格明细 -->
    <div class="green" v-if="type == 'normal'">
      <div>航班价格明细</div>
      <el-form :inline="true" :model="priceDetailsVoresList" size="mini">
        <!-- <el-form-item label="附加费" class="passenger">
          <el-input style="width:100px;" v-model="priceDetailsVoresList.additionalFeeOne"></el-input>
        </el-form-item> -->
        <el-form-item label="总票价" class="passenger2">
          <el-input
            style="width: 100px"
            disabled
            v-model="contactMobileList.orderPayAmount"
          ></el-input>
        </el-form-item>
        <el-form-item label="退票费" class="passenger">
          <el-input
            style="width: 100px"
            disabled
            v-model="returnFee"
          ></el-input>
        </el-form-item>
        <el-form-item label="机票张数" class="passenger2">
          <el-input
            style="width: 100px"
            disabled
            v-model="contactMobileList.guestNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="退票手续费" class="passenger2">
          <el-input-number
            style="width: 100px"
            :controls="false"
            v-model="serviceAmount"
          ></el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <div class="green" v-if="type == 'change'">
      <div v-for="(item, index) in changeList.orderTickets" :key="index">
        <div>航班信息</div>
        <el-form :inline="true" :model="item" class="" size="mini">
          <el-form-item label="乘机人" class="passenger">
            <el-input style="width: 100px" v-model="item.guestName"></el-input>
          </el-form-item>
          <el-form-item label="出发" class="passenger">
            <el-input style="width: 100px" v-model="item.departure"></el-input>
          </el-form-item>
          <el-form-item label="到达" class="passenger">
            <el-input style="width: 100px" v-model="item.arrival"></el-input>
          </el-form-item>
          <el-form-item label="舱位" class="passenger2">
            <el-input style="width: 100px" v-model="item.cabin"></el-input>
          </el-form-item>
          <el-form-item label="航班 " class="passenger">
            <el-input style="width: 100px" v-model="item.flight"></el-input>
          </el-form-item>
          <el-form-item label="乘机时间" class="passenger2">
            <el-input v-model="item.departureTime"></el-input>
          </el-form-item>
          <el-form-item label="到达时间" class="passenger">
            <el-input v-model="item.arrivalTime"></el-input>
          </el-form-item>
          <el-form-item label="航空公司" class="passenger2">
            <el-input style="width: 100px" v-model="item.airliner"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    
    <div>
      <span>退款方式</span>
      <span style="margin-left: 20px">
        <el-radio-group v-model="refundMethod" @change="refundMethodList">
          <el-radio label="backtrack">原路返回</el-radio>
          <el-radio label="reserveMoney">预留款</el-radio>
        </el-radio-group>
      </span>
    </div>
    <div style="margin: 20px 0 20px 0">
      <el-checkbox v-model="checkeda">是否短信</el-checkbox>
      <el-checkbox v-model="checkedb">是否取消pnr</el-checkbox>
    </div>
    <div class="block">
      <el-button type="success" @click="getrefundFlightOrder"
        >确认退票</el-button
      >
      <el-button type="success" @click="FlightOrder">返回</el-button>
    </div>
  </div>
</template>

<script>
import crumbs from "../../components/Crumbs.vue";
export default {
  name: "refund",
  components: {
    crumbs,
  },
  data() {
    return {
      checkeda: false,
      checkedb: false,
      passengersList: [],
      orderId: "",
      refundMethod: "",
      refundMethod: "backtrack",
      priceDetailsVoresList: {},
      serviceAmount: 0,
      informationVoList: {},
      journeyVoList: {},
      contactMobileList: {},
      tableData: [],
      rnTableData:[],
      changeTableData:[],
      flightOrderAssist: [], //辅营产品
      ticketNolist: "",
      dataList2: {},
      a: {
        a: "",
        flight: "",
      },
      message: {},
      formInline: {
        gcProfit: "",
        user: "",
        // 退票服务费 20
        refundservice: "20",
        region: "",
        message: "",
        gcProfit: "",
        region: "",
      },
      BreadCrumb: [
        {
          path: "/flight/processorders",
          name: "机票订单",
        },
        {
          path: "/flight/refund",
          name: "退票",
        },
      ],
      message: "",
      returnFee: 0,
      // news: {},
      input: "",
      radio: "1",
      //blue盒子
      means: {},
      age: {
        cabin: "",
      },
      dataList: {},
      changeList: {},
      type: this.$route.params.type,
    };
  },
  filters:{
    insuranceStatus(val){
      if(val === "success")return "开保成功"
      if(val === "failure")return "开保失败"
      if(val === "refund")return "退保"
      if(!val)return "未开保"
    },
  },
  methods: {
    cellClass(row){
      if (row.columnIndex === 0 && row.rowIndex === 0) {
        return 'disableheadselection'
      }
    },
    // 表格选中的数据
    handleSelectionChange(arr,row) {
      if(row.changeList)this.$refs.multipleTable.clearSelection();
      if(row.changeList)this.passengersList = [];
      if(row.changeList){
        this.$refs.multipleTable.toggleRowSelection(row);
        this.passengersList.push(row);
      }else{
        this.passengersList = arr;
      }
      if(this.passengersList.length)this.getorderRefundConfirm();
    },
    // 返回
    FlightOrder() {
      this.$router.go(-1);
    },
    refundMethodList(row) {
      console.log(row);
      this.refundMethod = row;
    },
    closeLoading() {
      this.tableLoading.close();
    },
    showLoading() {
      this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    },
    // 退票
    getrefundFlightOrder() {
      if (!this.passengersList.length) return;
      let parma = new Object(),apiUrl = ""
      this.passengersList.forEach((item) => {
        if (item.changeList && Object.keys(item.changeList).length) {
          apiUrl = "getchangeOrderRefundCRM";
          parma["ticketNo"] = item.changeList.ticketNo;
          parma ["serviceAmount"] = this.serviceAmount
          parma["orderId"] = this.orderId + "";
        } else {
          apiUrl = "getorderRefundCRM";
          parma["OrderID"] = this.orderId + "";
          parma ["RefundFee"] = this.serviceAmount
          if(!parma["ListMoPassenger"]) parma["ListMoPassenger"] = []
          parma["ListMoPassenger"].push({
            PassengerName: item.passengerName,
            TicketNo: item.ticketNo,
          });
        }
      })
      this.showLoading();
      this.$axios[apiUrl](parma).then((res)=>{
        this.closeLoading();
        if(res.code === "00000" && res.data.IsSuccess){
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.$router.go(-1);
        }else{
          this.$message({
            message: res.data.ErrorMsg || res.msg,
            type: "warning",
          });
        }
      });
      // 正常退票
      // .then((res) => {
      //     this.closeLoading();
      //     console.log(res);
      //     if (res.data.IsSuccess == true) {
      //       this.$message({
      //         message: "操作成功",
      //         type: "success",
      //       });
      //       this.$router.go(-1);
      //     }
      //     if (res.data.IsSuccess == false) {
      //       this.$message.error(res.data.ErrorMsg);
      //     }
      //   })
    },
    // 计算可退金额
    getorderRefundConfirm() {
      this.showLoading();
      if (!this.passengersList.length) return;
      let parma = {
            // refundMethod:this.refundMethod,
            serviceAmount: this.serviceAmount,
            orderId: String(this.orderId),
            ticketNo: [],
      },apiUrl = ""
      this.passengersList.forEach((item) => {
        if ( item.changeList && Object.keys(item.changeList).length ) {
          parma.ticketNo = [item.changeList.ticketNo]
          apiUrl = "getorderChangeRefundConfirm";
        } else {
          parma.ticketNo.push(item.ticketNo);
          apiUrl = "getorderRefundConfirm" 
        }
        this.$axios[apiUrl](parma).then((res)=>{
          this.closeLoading();
          if(res.code === "00000" && res.data.success){
            this.returnFee = (res.data.refundTicket[0].refundPrice*1).toFixed(2)
            console.log("成功")
          }else{
            this.$message({
              message: res.data.msg || res.msg,
              type: "warning",
            });
          }
        });
      });
    },
    getorderFlietails() {
      this.$axios
        .getorderFlightDetails({
          orderId: String(this.message),
        })
        .then((res) => {
          if (res.code == "00000") {
            this.getPressonList(res.data)
            this.getFlightOrderAssist(res.data.productsOrderBOS,res.data.orderItemS);
            this.orderId = res.data.orderId;
            this.contactMobileList = res.data;
          }
        });
    },
    getPressonList(data){
      // 深拷贝数据,以防止联动修改
    let orderItemS =[],orderReturnItems=[],changeRefundS =JSON.parse(JSON.stringify(data.changeRefundS));
        // 判断是有返程票或中转票
      data.orderItemS.forEach((item)=>{
        if(item.orderStatus!=="refundTicketSuccess" && item.orderStatus!=="changeRefundTicketSuccess"&& item.orderStatus!=="changeTicket"){
          if(item.tripType !== "OW"){
            orderReturnItems.push(item)
          }else{
            orderItemS.push(item)
          }
        }
      })
      if(orderReturnItems.length){
        orderItemS.forEach((item)=>{
          orderReturnItems.forEach((reItem)=>{
            if(item.passengerName === reItem.passengerName){
              item.returnList = reItem
            }
          })
        })
      }
      // 改签/退票列表有数据则合并到主订单列表
      if(changeRefundS.length){
        orderItemS.forEach((item)=>{
          if(!item.refundList) item.refundList = new Object();
          if(!item.changeList) item.changeList = new Object();
          changeRefundS.forEach((changeItem)=>{
            if(item.passengerName === changeItem.orderChangRefundItem.passengerName){
              // item = Object.assign(item,changeItem.orderChangRefundItem);
              if(changeItem.orderChangRefundItem.orderStatus === "changeRefundTicketSuccess" || changeItem.orderChangRefundItem.orderStatus === "refundTicketSuccess"){
                item.refundList=changeItem.orderChangRefundItem;
              }else{
                item.changeList=changeItem.orderChangRefundItem;
                this.changeTableData.push(changeItem.orderChangRefundItem);
              }
            }
          })
        })
      }
      this.tableData = [].concat(orderItemS); //人员及单程数据
      this.rnTableData =[].concat(orderReturnItems) ; //返程数据

    },
    // 辅营产品
    getFlightOrderAssist(data,orderItemS){
      console.log(data)
      orderItemS.forEach((item)=>{
        data.forEach((items)=>{
          if(items.orderItemId === item.id){
            if(!items.insuredName) items.insuredName =item.passengerName
            if(!items.insuredPhone) items.insuredPhone =item.passengerPhone
            if(!items.insuredIdNumber) items.insuredIdNumber =item.idNumber
            if(!items.insuredIdType) items.insuredIdType =item.idType
          }
        })
      })
      this.flightOrderAssist =  data;
    },
    // 改签订单详情
    getqueryOrderChange() {
      this.$axios
        .getselectOrderChangeDetails({
          changeOrderId: String(this.message),
        })
        .then((res) => {
          if (res.code == "00000") {
            this.contactMobileList = res.data;
            this.getPressonList(res.data);
            this.getFlightOrderAssist(res.data.productsOrderBOS,res.data.orderItemS);
            // this.tableData = res.data.orderItemS;
            this.ticketNolist = this.tableData[0].ticketNo;
            this.dataList = res.data.outboundVo[0];
          }
        });
    },
  },
  mounted() {
    this.message = this.$route.params.id;
    // console.log(this.type)
    // 机票订单
    if (this.type == "change") {
      this.getqueryOrderChange();
    } else if (this.type == "normal") {
      this.getorderFlietails();
    } else {
    }
    // this.getorderFlietails()
    // this.getrefundFlightOrder()
    // this.news = this.$route.params.news
    // console.log(this.news)
  },
};
</script>

<style scoped>
/deep/ .disableheadselection > .cell .el-checkbox__inner {
	display: none;
}
.boxs {
  padding: 20px;
}

.block {
  margin-top: 10px;
}
</style>